<template>
  <div class="send">
    <el-breadcrumb separator="/" class="bread_crumbs">
      <el-breadcrumb-item class="m_text1">消息中心</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a class="m_text2">发送机制维护</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="right_title">
      <!-- 搜索 -->
      <span class="search">
        <!-- <el-input
          v-model="createUserName"
          placeholder="请输入创建人姓名"
        ></el-input> -->
        <el-input
          v-model="mechanismCode"
          placeholder="请输入发送机制编码"
        ></el-input>
        <!-- <el-date-picker
          v-model="createTime"
          type="date"
         format="yyyy 年 MM 月 dd 日"
         value-format="yyyy-MM-dd"
          placeholder="选择创建时间"
        >
        </el-date-picker> -->
        <el-button
          type="primary"
          icon="el-icon-search"
          circle
          @click="inquiry"
        ></el-button>
      </span>
      <!-- 操作行 -->
      <span @click="dialogVisible = true">
        <i
          class="el-icon-folder-add"
          style="display: inline-block;margin-right:10px"
        ></i>
        <span>添加</span>
      </span>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
      mix-height="650"
      :cell-style="columnStyle"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column
        prop="modeCode"
        width="200"
        align="center"
        label="系统划分编码"
      ></el-table-column>
      <el-table-column
        prop="modeName"
        align="center"
        label="系统划分名称"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="创建时间"
        width="300"
      >
      </el-table-column>
      <el-table-column
        prop="subNum"
        align="center"
        label="订阅人数"
        width="100"
      >
      </el-table-column>
       <el-table-column
        prop="topicOrder"
        align="center"
        label="主题排序"
        width="100"
      >
      </el-table-column>
       <el-table-column
        prop="topicCode"
        align="center"
        label="主题编码"
        width="150"
      >
      </el-table-column>
       <el-table-column
        prop="topicName"
        align="center"
        label="主题名称"
        width="150"
      >
      </el-table-column>
       <el-table-column
        prop="topicDesc"
        align="center"
        label="主题描述"
        width="300"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <i class="el-icon-delete"></i>
          <el-button type="text" @click="deleteData(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      ></el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="添加" :visible.sync="dialogVisible">
      <add-form @close="close"></add-form>
    </el-dialog>
  </div>
</template>

<script>
import AddForm from "./add";
import { queryListByLikeTopic } from "../../api";
import { delectSend } from "../../api";
export default {
  components: {
    AddForm
  },
  data() {
    return {
      dialogVisible: false,
      search: "", //搜索内容
      tableData: [], //列表渲染数据
      totals: 0, //数据条数
      page: 1, //当前页数
      page_size: 10, //每页条数
      mechanismCode: "" //搜索机制编码
    };
  },
  methods: {
    // 分页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page_size = val;
       this.queryListByLike();
    },
    // 分页页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
       this.queryListByLike();
    },
    //删除操作
    deleteData(e) {
      let typeId = e.row.mechanismId;
      this.$confirm("此操作将永久删除该条机制, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delectSend({
            typeId: typeId
          })
            .then(res => {
              this.$message({
                message: res.remsg,
                type: "success"
              });
              this.queryListByLike();
            })
            .catch(res => {
              console.log(res);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 搜索
    inquiry() {
      let num = this.mechanismCode;
      var format = true; //编码机制判断
      for (var i = 0; i < num.length; i++) {
        if (num.charAt(i) != 0 && num.charAt(i) != 1) {
          this.$message({
            message: "消息机制编码格式不正确，请重新输入",
            type: "warning"
          });
          format = false;
          return;
        }
      }

      if (num.length != 11) {
        this.$message({
          message: "消息机制编码格式不正确，请重新输入",
          type: "warning"
        });
        format = false;
      }

      if (num == "00000000000") {
        this.$message({
          message: "无效的机制编码",
          type: "warning"
        });
        format = false;
      }
      if (format) {
        queryListByLikeTopic({
          currentPage: this.page,
          pageSize: this.page_size,
          isDeleted: 0,
          mechanismCode: this.mechanismCode
        })
          .then(res => {
            this.tableData = res.redata.list;
            this.totals = res.redata.total;
          })
          .catch(res => {
            console.log(res);
          });
      }
    },
    //查询列表
    queryListByLike() {
      queryListByLikeTopic({
        currentPage: this.page,
        pageSize: this.page_size,
        isDeleted: 0
      })
        .then(res => {
          this.tableData = res.redata.list;
          this.totals = res.redata.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //添加保存成功后事件
    close(e) {
      this.dialogVisible = e;
      this.queryListByLike();
    }
  },
  created() {
    this.queryListByLike();
  },
  watch: {}
};
</script>
<style scoped lang="less">
.file_name {
  color: #3385d6;
}
// 面包屑
.bread_crumbs {
  font-size: 18px;
  border-bottom: 1px solid #eee;
  padding: 30px 20px;
  background: #fff;
  .m_text1 {
    color: #606266;
  }
  .m_text2 {
    color: rgb(64, 158, 255) !important;
  }
}
.right_title {
  height: 50px;
  background: #fff;
  margin: 5px 0 0;
  display: flex;
  padding-right: 20px;
  align-items: center;
  justify-content: space-between;
  span {
    cursor: pointer;
  }
  .search {
    margin-left: 20px;
    display: flex;
    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
      margin: 0 10px;
    }
    .but {
      margin: 0 10px;
    }
  }
}
.el-form {
  background-color: #fff;
}
.paging {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
}
</style>
